<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="fooddetail">
        <el-page-header @back="goBack" content="区角评论详情" class="mb-20"></el-page-header>
        <div class="mb-10">
          <div class="toplineBox">
            <div class="toplineBox-left">
              <!--<el-input v-model="searchWord.corner_name" placeholder="填写区角名称" size="small" class="w-140"></el-input>-->
              <el-input v-model="searchWord.name" placeholder="填写学生姓名" size="small" class="w-140"></el-input>
              <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
              <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置刷新</el-button>
            </div>
            <p class="numberline toplineBox-right">总{{page.total}}条</p>
          </div>
        </div>
        <div class="eidtbody">
          <!--<p class="foodtitle-p mb-20">{{dayTime?dayTime:''}} 当日发布的菜品</p>-->
          <div class="fooddetail-list">
            <el-table
                    ref="multipleTable"
                    :data="arryList"
                    :stripe="tableoption.tableStripe"
                    :border="tableoption.tableBorder"
                    tooltip-effect="dark"
                    style="width: 100%"
                    header-cell-class-name="table-text-c"
                    cell-class-name="table-text-c">
              <el-table-column
                      label="学生头像" align="center">
                <template slot-scope="scope">
                  <div class="checkImgDialog width60 mg-auto"
                       :style="{backgroundImage:'url('+(scope.row.student.pic?scope.row.student.pic:bgimgBtn)+')',backgroundSize:'cover',backgroundPosition:'center'}"
                       @click="viewImgDialogFn(scope.$index)">
                    <div class="imgpreviewBody">
                      <div class="imgpreview">
                        <i class="el-icon-view"></i>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                      label="学生姓名" align="center">
                <template slot-scope="scope">
                  {{scope.row.student?scope.row.student.name:'未知'}}
                </template>
              </el-table-column>
<!--              <el-table-column-->
<!--                      prop="fraction"-->
<!--                      label="学生评价" align="center">-->
<!--              </el-table-column>-->
              <el-table-column
                      label="操作"
                      width="150" align="center">
                <template slot-scope="scope">
                  <el-button size="small" @click="addActive(scope.$index)">查看学生实时采集</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                :page-size="page.pagesize"
                :current-page="page.pageindex"
                layout="total, prev, pager, next"
                :total="page.total"
                @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <!--viewImgDialog.vue-->
      <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
    </div>
  </div>
</template>

<script>
  import drawerdetailBox from '@/components/dialog/drawerdetailBox.vue'
  import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
  import {pagination, tableoption, yearDay} from '@/utils/util.js'
  import bgimgBtn from '@/assets/imageAdmin/defultimg.jpg'
  import api from '@/utils/api.js'

  export default {
    components: {
      drawerdetailBox,
      viewImgDialog
    },
    data () {
      return {
        bgimgBtn: bgimgBtn,
        currentDate: new Date(),
        tableoption: tableoption,
        editId: this.$route.query,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [],
        dialogDrawerVisible: false,
        dishOption: null,
        dayTime: '',
        // 预览
        imgsrcCheck: '',
        dialogImgVisible: false,
        searchWord: {
          name: ''
        }
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        let data = {}
        // 1总列表 2 评级
        if (Number(this.editId.type) === 1) {
          data.class_id = this.editId.class_id
          data.corner_id = this.editId.corner_id
        }
        if (Number(this.editId.type) === 2) {
          data.fraction = this.editId.fraction
          data.corner_id = this.editId.corner_id
        }
        data.name = this.searchWord.name
        this.$post(api.admin_corner_apply_list, data).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 搜索
      searchBtn () {
        this.page.pageindex = 1
        this.InitFn()
      },
      refreshFn () {
        this.page.pageindex = 1
        this.searchWord.name = ''
        this.InitFn()
      },
      showlist (index) {
        this.$router.push('CornerStudent?type=2&id=' + this.arryList[index].id)
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      goBack () {
        this.$router.go(-1)
      },
      viewImgDialog (index) {
        this.imgsrcCheck = [this.arryList[index].corner.pic]
        this.dialogImgVisible = true
      },
      viewImgDialogFn (index) {
        if (this.arryList[index].pic) {
          this.imgsrcCheck = this.arryList[index].pic
          this.dialogImgVisible = true
        }
      },
      addActive (index) {
        this.$router.push('/statudentAtive?id=' + this.arryList[index].id)
      }
    },
    mounted () {
    }
  }
</script>
